<!--
 * @Author: White
 * @description: 轮播图
 * @LastEditTime: 2021-12-03 18:44:11
-->

<template>
  <div>
    <div class="card-wrapper-loading"
      :style="{ 'background': theme.color }"
      v-show="loading"
      v-loading="loading"
      element-loading-text="载入中..."
      element-loading-spinner="el-icon-loading">
    </div>
    <div class="carousel-wrapper" v-show="!loading">
      <el-carousel :interval="100000" type="card" height="200px">
        <el-carousel-item v-for="item in banners" :key="item.imageUrl">
            <div class="banner-item" @click="playSongById(item.targetId)">
              <img :src="item.imageUrl" :alt="item.typeTitle" />
              <span :style="{ backgroundColor: item.titleColor }">{{item.typeTitle}}</span>
            </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex"
import { reactive, onMounted, computed, toRefs } from 'vue'
import { getBanner, getMusicDetail } from '@/api/music'
export default {
  setup () {
    const store = useStore()
    const theme = computed(() => store.state.theme)
    const data = reactive({
      loading: false,
      banners: []
    })
    onMounted(() => {
      getData()
    })
    const getData = async () => {
      data.loading = true
      const res = await getBanner()
      if (res.data.code === 200) {
        data.banners = res.data.banners
        data.loading = false
      }
    }
    // 播放歌曲
    const playSongById = async (id) => {
      let parmas = { ids: id }
      const res = await getMusicDetail(parmas)
      store.commit("setCurrentSong", res.data)
    }
    return {
      ...toRefs(data),
      theme,
      getData,
      playSongById
    }
  }
}
</script>

<style lang="scss" scoped>
.card-wrapper-loading {
  width: 100%;
  height: 200px;
  z-index: 9;
  top: 0px;
  :deep(.el-loading-spinner) {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  :deep(.el-icon-loading) {
      color: #666;
  }
  :deep(.el-loading-text) {
      margin-left: 2px;
      color: #666;
  }
}
.carousel-wrapper {
  margin: 10px 0;
  >>> .el-carousel__item--card {
    width: 540px;
    height: 200px;
  }
  .banner-item {
    width: 100%;
    height: 100%;
    display: flex;
    & > img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
    & > span {
      font-size: 14px;
      font-weight: bold;
      position: absolute;
      right: 0;
      bottom: 0;
      color: white;
      padding: 4px 8px;
      border-top-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
}
</style>
